<template>
  <div id="container">
    <ul id="list">
      <!-- img标签放奖品图片 -->
      <!-- mask类为抽奖滚动起来的标记 -->
      <template v-for="i in prizeList">
        <span v-if="i.name === 'button'"
              id="startbutton"
              @click="startlottery"
              style="background-color:#ff3a59;color:white;font-size: 20px;">
          开始抽奖
        </span>
        <li v-else :data-name="i.name">
          <img :src="i.pic" alt=""/>
        </li>
      </template>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
let container = null
let li = null
let span = null
let message = null
let timer = null
let bReady = true //定义一个抽奖开关
const prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序
let num = 0;//num用来存放得到的随机函数，也就是抽中的奖品
const prizeList = [
  { name: '手机', pic: 'https://t14.baidu.com/it/u=1907298832,2489650453&fm=224&app=112&f=JPEG?w=500&h=500' },
  { name: '手表', pic: 'https://img1.baidu.com/it/u=2631716577,1296460670&fm=253&fmt=auto&app=120&f=JPEG' },
  { name: '苹果', pic: 'https://img2.baidu.com/it/u=2611478896,137965957&fm=253&fmt=auto&app=138&f=JPEG' },
  { name: '棒棒糖', pic: 'https://img2.baidu.com/it/u=576980037,1655121105&fm=253&fmt=auto&app=138&f=PNG' },
  { name: 'button', pic: '' },
  { name: '娃娃', pic: 'https://img2.baidu.com/it/u=4075390137,3967712457&fm=253&fmt=auto&app=138&f=PNG' },
  { name: '木马', pic: 'https://img1.baidu.com/it/u=2434318933,2727681086&fm=253&fmt=auto&app=120&f=JPEG' },
  { name: '德芙', pic: 'https://img0.baidu.com/it/u=1378564582,2397555841&fm=253&fmt=auto&app=120&f=JPEG' },
  { name: '谢谢参与', pic: 'https://www.2bulu.com/js/2bulu_app/lotterydraw/img/joinfree.png' },
]
onMounted(()=>{
  container = document.getElementById('container')
  li = document.getElementsByTagName('li')
  span = document.getElementById('startbutton')
})
//开始抽奖
const startlottery = () => {
  if(bReady) {//当抽奖开关为true的时候，可点击抽奖
    span.style.background="#ada7a8";
    bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
    num = getrandomnum(1,9)//得到一个随机数（即奖品）
    startinit(num);//执行抽奖初始化
  }
}

//抽中的奖品 返回1-9的整数，包含1，不包含9
const getrandomnum = (n, m) => {
  return parseInt((m - n) * Math.random() + n);
}

//抽奖初始化
const startinit = (num) => {
  let i = 0;  //定义一个i 用来计算抽奖跑动的总次数
  let t = 100;  //抽奖跑动的速度 初始为200毫秒
  const rounds = 5;  //抽奖转动的圈数
  const rNum = rounds*8;  //标记跑动的次数（这是一个条件判断分界线）
  timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数

  //抽奖滚动的函数
  function startscroll() {

    //每次滚动抽奖将所有li的class都设为空
    for(let j = 0; j < li.length; j++) {
      li[j].className = '';
    }

    const prizenum = prize[i%li.length];  //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
    li[prizenum].className = "active";
    i++;

    if(i<rNum-8){  //当i小于转(rNum-8次)的数量，t不变还是200毫秒
      timer = setTimeout(startscroll, t);//继续执行抽奖滚动
    }else if(i>= rNum-8 && i< rNum+num){
      //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低
      t+=(i-rNum+8)*5;
      timer = setTimeout(startscroll, t);//继续执行抽奖滚动
    }
    if( i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息
      let timer2 = null;
      timer2 = setTimeout(function(){
        const name = (document.querySelector('.active') as HTMLElement).dataset.name
        if(name !== '谢谢参与'){
          alert(`恭喜你中了${name}`)
        }else {
          alert("谢谢参与")
        }
        span.style.background="#ff3a59";
        clearTimeout(timer2);
      },1000);
      bReady = true;//当计时器结束后让span标签变为抽奖状态
      clearTimeout(timer);
    }
  }
}
</script>

<style scoped>
#container {
  width: 340px;
  height: 340px;
  margin: 10% auto;
  border: 7px solid #99d4ff;
  border-radius: 10px;
}
#list {
  width: 330px;
  height: 340px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#list li,
#list span {
  width: 100px;
  height: 100px;
  float: left;
  text-align: center;
  line-height: 100px;
  position: relative;
  margin: 1.4%;
  border-radius: 5px;
}
#list li img{
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
}
#list span:hover {
  cursor: pointer;
  color: orange;
  font-size: 18px;
}
#list .active img{
  display: block;
  border: 2px solid yellow;
}
</style>